<template>
  <div class="app-container" v-loading="loading">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="72px"
    >
      <el-form-item label="门店名称" prop="schoolName">
        <el-input
          v-input-restrict
          v-model="queryParams.schoolName"
          placeholder="请输入门店名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="大区" prop="regionId">
        <el-select
          v-model="queryParams.regionId"
          placeholder="请选择大区"
          filterable
        >
          <el-option label="全部" :value="undefined" />
          <el-option
            v-for="dict in area"
            :key="dict.regionId"
            :label="dict.regionName"
            :value="dict.regionId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          v-preventReClick
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button
          v-preventReClick
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-preventReClick
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <div>
      <div></div>
    </div>
    <!-- 管理员设置弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="管理员设置"
      :visible.sync="adminListOpen"
      width="1000px"
      append-to-body
    >
      <el-button
        v-preventReClick
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleAddAdmin"
        >添加管理员</el-button
      >
      <el-table
        v-loading="adminloading"
        style="margin-top: 20px"
        :data="adminList"
      >
        <el-table-column
          align="center"
          property="name"
          label="姓名"
        ></el-table-column>
        <el-table-column
          align="center"
          property="phoneNumber"
          label="账号"
        ></el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          property="postNames"
          label="岗位"
        ></el-table-column>
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status == 0">启用</el-tag>
            <el-tag type="danger" v-if="scope.row.status == 1">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <!-- <el-button
              v-preventReClick
              size="mini"
              type="text"
              icon="el-icon-open"
              @click="handleAdminSwitch(scope.row)"
              >{{ scope.row.status == 0 ? "停用" : "启用" }}</el-button
            > -->
            <el-button
              v-preventReClick
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleAdminDelete(scope.row)"
              >移除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 添加编辑 管理员弹框 -->
    <addShopAdminDialog
      :open.sync="addAdminOpen"
      @refresh="getAdminList()"
      :shopObject="addAdmin_shopObject"
      :existsAdmins="adminList"
    ></addShopAdminDialog>

    <!-- 添加门店弹框 -->
    <addShop
      @refresh="getList()"
      :open.sync="addShop_open"
      :type="addShop_type"
      :shopId="addShop_shopId"
    ></addShop>
    <!-- 列表 -->
    <div class="commonMenu">
      <el-menu
        default-active=""
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <!-- 0待提交1待审核2已驳回3已通过，null就是全部 -->
        <el-menu-item index="">全部</el-menu-item>
        <el-menu-item index="1">直营店</el-menu-item>
        <el-menu-item index="2">加盟店</el-menu-item>
        <el-menu-item index="3">托管店</el-menu-item>
      </el-menu>
    </div>

    <div
      class="list flex"
      v-infinite-scroll="getMore"
      infinite-scroll-immediate="false"
    >
      <el-empty
        v-if="postList.length == 0"
        style="margin: 0 auto"
        description="暂无门店"
      ></el-empty>
      <div
        :style="{
          backgroundImage: `url('${
            item.schoolPic
              ? item.schoolPic
              : require('@/assets/images/branch.png')
          }')`,
          backgroundSize: 'cover',
          backgroundRepeat: 'no-repeat',
        }"
        class="card rela shou"
        v-for="(item, index) in postList"
        :key="index"
        @click="HandleDetail(item)"
      >
        <!-- 店面类型 -->
        <div class="Tag abso" v-if="item.tagName || item.regionName">
          <div>
            {{ item.tagName }}
          </div>
          <div>
            {{ item.regionName }}
          </div>
        </div>
        <!-- 按钮组 -->
        <div class="function abso">
          <div
            v-preventReClick
            class="iconbox"
            v-hasPermi="['system:school:detail']"
            @click.stop="HandleDetail(item)"
          >
            详情
          </div>
          <!-- <div
            v-if="item.schoolId !== 1"
            v-preventReClick
            class="iconbox"
            @click.stop="handleUpdate(item)"
          >
            编辑
          </div> -->
          <!-- <div v-preventReClick class="iconbox" @click.stop="HandleAdmin(item)">
            管理员设置
          </div> -->
          <div
            v-if="item.schoolId !== 1"
            v-preventReClick
            class="iconbox"
            v-hasPermi="['system:school:remove']"
            @click.stop="handleDelete(item)"
          >
            删除
          </div>
        </div>
        <div class="bottom abso">
          <div
            class="content"
            v-if="item.content"
            style="white-space: pre-wrap"
          >
            {{ item.content }}
          </div>
          <div class="t">{{ item.schoolName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listPost_region } from "@/api/school/area";
import { listPost_tag } from "@/api/school/tag";
import addShopAdminDialog from "./component/addShopAdmin";
import addShop from "./component/addShop";
import { checkPhonenot } from "@/utils/validate";
import { listPost_school, delPost_school } from "@/api/school/list";
import {
  listPost_student,
  addPost_changeStatus,
  delPost_student,
  unbindSchoolAdmin,
} from "@/api/schoolOrganization/student";

export default {
  name: "Post",
  dicts: ["sys_normal_disable"],
  components: { addShopAdminDialog: addShopAdminDialog, addShop: addShop },
  data() {
    return {
      // 门店类型
      Tag: [],
      // 大区列表
      area: [],
      addShop_open: false,
      addShop_type: 1,
      addShop_shopId: null,
      adminList: [],
      adminListOpen: false,
      editAdminId: "",
      editBranchId: "",

      addAdminOpen: false,
      addAdmin_shopObject: {},

      // 遮罩层
      loading: false,
      adminloading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 总页数
      totalPage: 0,
      // 岗位表格数据
      postList: [],
      upLoadData: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // level
      level: [],
      // 查询参数
      activeIndex: "",
      queryParams: {
        pageNum: 1,
        pageSize: 24,
        schoolName: undefined,
        tagId: undefined,
        regionId: undefined,
      },
    };
  },
  created() {
    this.getTag();
    this.getArea();
    this.getList();
  },
  methods: {
    async getTag() {
      let res = await listPost_tag({
        pageNum: 1,
        pageSize: 9999,
      });
      this.Tag = res.rows;
    },
    async getArea() {
      let res = await listPost_region({
        pageNum: 1,
        pageSize: 9999,
      });
      this.area = res.rows;
    },
    /** 查询岗位列表 */
    getList(num) {
      console.log(num);
      if (!num) {
        this.queryParams.pageNum = 1;
        this.queryParams.pageSize = 24;
        this.postList = [];
      }
      this.loading = true;
      listPost_school(this.queryParams).then((response) => {
        if (num) {
          this.upLoadData = response.rows;
          this.postList = this.postList.concat(this.upLoadData);
        } else {
          this.postList = response.rows;
        }
        this.total = response.total;
        //向上取整 总页数
        this.totalPage = Math.ceil(response.total / this.queryParams.pageSize);
        this.loading = false;
      });
    },
    getMore() {
      this.upLoadData = [];
      if (this.postList.length >= this.total) {
      } else {
        this.queryParams.pageNum++;
        this.getList(true);
      }
    },

    // 状态选择 查询列表
    handleSelect(key, keyPath) {
      this.queryParams.tagId = key;
      this.getList();
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.addShop_open = true;
      this.addShop_type = 1;
      this.addShop_shopId = null;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.addShop_open = true;
      this.addShop_type = 2;
      this.addShop_shopId = row.schoolId;
    },
    /** 详情按钮操作 */
    HandleDetail(row) {
      this.$router.push({
        path: "/school/detail",
        query: {
          shopId: row.schoolId,
        },
      });
    },

    /** 删除按钮操作 */
    async handleDelete(row) {
      const schoolId = row.schoolId || this.ids;
      let res = await listPost_student({
        schoolIds: row.schoolId,
        status: 0,
        pageNum: 1,
        pageSize: 9999,
      });
      if (res.total == 0) {
        this.$confirm(
          `确认删除【${row.schoolName}】吗？删除后不可恢复`,
          `删除确认`,
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(async () => {
            const loading = this.$loading({
              lock: true,
              text: "正在删除",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.6)",
            });
            try {
              let res = await delPost_school(schoolId);
              if (res.msg == "删除成功") {
                this.getList();
              }
              this.$modal.msgSuccess(res.msg);
            } finally {
              loading.close();
            }
          })
          .catch(() => {});
      } else {
        this.$confirm(
          `【${row.schoolName}】仍有账号,确认将【${row.schoolName}】删除吗？删除后门店下的员工账号也将被删除`,
          `删除确认`,
          {
            confirmButtonText: "关闭",
            showCancelButton: false, //是否显示取消按钮
            type: "warning",
          }
        )
          .then(async () => {})
          .catch(() => {});
      }
    },
    /*  管理员设置*/
    async HandleAdmin(row) {
      this.addAdmin_shopObject = row;
      this.adminListOpen = true;
      this.getAdminList();
    },
    /* 获取门店管理员列表 */
    async getAdminList() {
      this.adminloading = true;
      let res = await listPost_student({
        schoolIds: this.addAdmin_shopObject.schoolId,
        RoleIds: "3",
        pageNum: 1,
        pageSize: 1000,
      });
      this.adminList = res.rows;
      this.adminloading = false;
    },
    /* 添加管理员 */
    handleAddAdmin() {
      this.addAdminOpen = true;
    },
    // 删除管理员
    async handleAdminDelete(row) {
      this.$confirm(
        `确认移除管理员【${row.name}】吗？移除后该账号不可登录门店管理端`,
        `移除管理员确认`,
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          unbindSchoolAdmin(this.addAdmin_shopObject.schoolId, row.userId).then(
            (res) => {
              this.$modal.msgSuccess("移除管理员成功");
              this.open = false;
              this.getAdminList();
            }
          );
        })
        .catch(() => {});
    },
    // 停用 启用管理员
    handleAdminSwitch(row) {
      this.$confirm(
        `确定${row.status == "0" ? "停用" : "启用"}【${row.name}】吗?${
          row.status == "0" ? "停用后该账号不可登录使用！" : ""
        }`,
        `${row.status == "0" ? "停用提示" : "启用提示"}`,
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let formData = new FormData();
          formData.append("studentIds", row.studentId);
          formData.append("status", row.status == 0 ? 1 : 0);
          addPost_changeStatus(formData).then((response) => {
            this.$modal.msgSuccess(
              `${row.status == "0" ? "停用" : "启用"}成功`
            );
            this.open = false;
            this.getAdminList();
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped lang="scss">
.list {
  max-height: calc(100vh - 289px);
  overflow-y: scroll;
  margin-top: 16px;

  .card:hover {
    .function {
      display: flex;
    }

    .bottom {
      .content {
        display: block;
      }
    }
  }

  .card {
    overflow: hidden;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    width: 240px;
    height: 160px;
    border-radius: 4px;
    margin: 0 35px 35px 0;

    .Tag {
      font-size: 14px;
      left: 0;
      top: 0;
      border-radius: 4px 0 4px 0;
      padding: 4px 8px 4px 8px;
      color: white;
      background: rgba(0, 0, 0, 0.3);
    }

    .function {
      font-size: 14px;
      display: none;
      border-radius: 0px 4px 0px 4px;
      padding: 0 8px 0 8px;
      right: 0;
      top: 0;
      border-radius: 0px 4px, 0px, 4px;
      background: rgba(0, 0, 0, 0.3);

      .iconbox {
        color: white;
        padding: 4px 6px;
      }
    }

    .bottom {
      bottom: 0;

      .content {
        overflow-y: scroll; //溢出内容隐藏
        display: none; //特别显示模式
        max-height: 100px;
        width: 100%;
        background: rgba(0, 0, 0, 0.3);
        padding: 2px 12px;
        font-size: 10px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
      }

      .t {
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        line-height: 30px;
        color: rgba(255, 255, 255, 1);
        width: 240px;
        height: 30px;
        border-radius: 0px 0px, 4px, 4px;
        background: rgba(35, 184, 112, 1);
      }
    }
  }
}

// 上传图片样式

.upload-head {
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 172px;
  height: 112px;
  border-radius: 4px;
  border: 1px dashed rgba(184, 196, 209, 1);

  .add {
    width: 29px;
    height: 29px;
    margin: 25px auto 0 auto;
  }

  div {
    font-size: 14px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    margin-top: 0px;
    width: 100%;
    text-align: center;
  }

  .cover {
    width: 170px;
    height: 110px;
    border-radius: 4px;
  }
}
</style>
